﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjax.aspx.cs" Inherits="CSharpLearningWeb.Jquery.JqueryAjax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#btnDate').click(function () {
                $.ajax({
                    type: 'POST',
                    url: '/Service/AjaxService.svc/GetDate',
                    data: '{}',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (data) {
                        alert(data.d);
                    },
                    error: function (error) {
                        alert("Error: " + error);
                    }
                });
            });

            $('#btnEmployee').click(function () {
                $.ajax({
                    type: 'POST',
                    url: '/Service/AjaxService.svc/GetEmployee',
                    data: '{}',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (data) {
                        var object = JSON.parse(data.d);                        
                        $.each(object, function (i, item) {
                            alert(item.Name);
                            alert(item.Age);
                        });                      
                    },
                    error: function (error) {
                        alert("Error: " + error);
                    }
                });
            });

            $('#btnSubmit').click(function () {
                //$.post('JqueryAjax.aspx/GetDate',  function (data) {
                //    alert(data.d);
                //});
                var personNameVar = 'Jp'
                var dataIn = '{' + '"personName":"' + personNameVar + '"}';
                $.ajax({
                    type: 'POST',
                    url: '/Service/AjaxService.svc/HelloWorld',
                    data: dataIn,
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (data) {
                        var object = JSON.parse(data.d);
                        if (object.Error == '') {
                            alert(object.Response);
                            alert(object.TimeExecuted);
                        }
                    },
                    error: function (error) {
                        alert("Error: " + error);
                    }
                });

                //debugger;
                //                $.ajax({
                //                    type: 'POST',
                //                    url: 'JqueryAjax.aspx/GetDate',
                //                    data: "{}",
                //                    contentType: 'application/json; charset=utf-8',
                //                    dataType: 'json',
                //                    success: function (result) {
                //                        alert(result.d[0].Age);
                //                        $.each(result.items, function (i, item) {
                //                            alert(item.Name);
                //                            alert(item.Age);
                //                        });
                //                    },
                //                    error: function () {
                //                        alert('erro');
                //                    }
                //                });
            })
        });


        //debugger;
        //$.getJSON('JqueryAjax.aspx/GetDate', function (data) {
        //    // do something with the data here
        //    debugger;
        //    alert(data);
        //});
        //$.ajax({
        //    type: 'POST',
        //    url: 'JqueryAjax.aspx/GetDate',
        //    data: '{}',
        //    contentType: 'application/json; charset=utf-8',
        //    dataType: 'json',
        //    success: function (data) {
        //        debugger;
        //        $.each(data.items, function (i, item) {
        //            alert(item.Name);
        //            alert(item.Age);
        //        });
        //    },
        //    error: function () {
        //        alert('erro');
        //    }
        //});
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="btnSubmit" type="button" value="Hello World" />
        <input id="btnDate" type="button" value="GetDate" />
        <input id="btnEmployee" type="button" value="GetEmployee" />
    </div>
    </form>
</body>
</html>
